<script setup lang="ts">
import { ref } from "vue";
const InderSname = ref([
    {
        id: 1,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg',
        name: "用户昵称",
        ip: '贵州',
        times: "一天前",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        id: 2,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
        name: "用户1",
        ip: '贵州',
        times: "一小时前",
        tang1: "#tag1 #tag2",
        tang1_s: "22222222222222",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 120,
        title1_s: 60,
        title2_s: 80,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

        ]
    },
    {
        id: 3,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
        name: "用户2",
        ip: '北京',
        times: "三天前",
        tang1: "#tag1 #tag2",
        tang1_s: "333333333",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 130,
        title1_s: 70,
        title2_s: 40,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

        ]
    },
    {
        id: 4,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
        name: "用户3",
        ip: '上海',
        times: "两天前",
        tang1: "#tag1 #tag2",
        tang1_s: "4444444444",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 90,
        title1_s: 100,
        title2_s: 500,
        images: [

            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

        ]
    },
    {
        id: 5,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
        name: "用户4",
        ip: '四川',
        times: "一天前",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 40,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

        ]

    },
    {
        id: 6,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/17.jpg',
        name: "用户5",
        ip: '广西',
        times: "一小时前",
        tang1: "#tag1 #tag2",
        tang1_s: "22222222222222",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 170,
        title1_s: 60,
        title2_s: 80,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',


        ]
    },
    {
        id: 7,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
        name: "用户6",
        ip: '江苏',
        times: "五天前",
        tang1: "#tag1 #tag2",
        tang1_s: "333333333",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 130,
        title1_s: 70,
        title2_s: 40,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',


        ]
    },
    {
        id: 8,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
        name: "用户7",
        ip: '上海',
        times: "两天前",
        tang1: "#tag1 #tag2",
        tang1_s: "4444444444",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 90,
        title1_s: 100,
        title2_s: 500,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',


        ]
    },

])
// 随机分配
const shuffleData = () => {
    const data = InderSname.value;
    for (let i = data.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [data[i], data[j]] = [data[j], data[i]];
    }
    InderSname.value = data;
};
// 刷新页面
const isTriggered = ref(false)
const onRefresh = async () => {
    isTriggered.value = true
    await Promise.all([
        InderSname
    ])
    shuffleData(); // 在这里进行数据随机调换
    setTimeout(() => {
        console.log("刷新成功");
        isTriggered.value = false;
    }, 500);
}
let isFollowed = false
</script>

<template>
    <scroll-view scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isTriggered">
        <view class="qus">
            <text class="wo-box">我的关注</text>
            <scroll-view scroll-x>
                <view class="clow">
                    <view v-for="index in 6" :key="index">
                        <view class="clow1">
                            <view class="w-box1">
                                <image src="" mode="scaleToFill" class="w-img" />
                                <view class="w-tit">
                                    <text class="w-datit">网贷协商</text>
                                    <text class="w-xitit">1000人已加入</text>
                                </view>
                            </view>
                            <text class="w-box2">圈子内最新动态内容</text>
                            <text class="w-box3">圈子内最新动态内容</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="fx-box">
                <text class="fa-box">发现圈子</text>
                <view class="xin-box">
                    <view class="xw-box">+</view>
                    <text class="xq-box">新建圈子</text>
                </view>
            </view>
            <scroll-view scroll-x>
                <view class="clows">
                    <view v-for="index in 6" :key="index">
                        <view class="clow1s">
                            <view class="re-box1">
                                <text class="re-box2">热门圈子</text>
                                <uni-icons type="right" size="30" color="#fff" class="reg-box"></uni-icons>
                            </view>
                            <view class="re-box3" v-for="index in 2" :key="index"
                                :style="{ marginTop: index == 2 ? '0' : '20' }">
                                <image src="" mode="scaleToFill" class="re1" />
                                <view class="res">
                                    <text class="re2">网贷协商</text>
                                    <text class="re3">1000人已加入</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="bottnons-box" v-for="index in 5" :key="index">
                <view class="tops-box">
                    <image src="" mode="scaleToFill" class="tu-z" />
                    <view class="mid-z">
                        <text class="mid1-z">90后还贷日常</text>
                        <text class="mid2-z">1000人已加入</text>
                    </view>
                    <text class="qu-z">进入圈子</text>
                </view>
                <view v-for="index in 2" :key="index" class="tex" :style="{ marginTop: index == 2 ? '0' : '18' }">
                    <text class=" boton-box2">圈子内最新动态内容</text>
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<style lang="scss">
.qus {
    display: flex;
    margin: 0 64rpx;
    height: 1388rpx;
    background: #ffffff;
    flex-direction: column;

    .wo-box {
        margin-top: 30rpx;
        display: flex;
        width: 136rpx;
        height: 42rpx;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: LEFT;
        color: #000000;
        line-height: 38rpx;
    }

    .clow {
        display: flex;
        width: 100%;
        height: 260rpx;
        flex-direction: row;

        .clow1 {
            display: flex;
            margin-right: 48rpx;
            flex-direction: column;
            width: 414rpx;
            height: 258rpx;
            background: #f0f0f0;
            border-radius: 20rpx;

            .w-box1 {
                display: flex;
                height: 80rpx;
                margin: 28rpx 28rpx;
                flex-direction: row;

                .w-img {
                    width: 76rpx;
                    height: 78rpx;
                    background: #ffffff;
                    border-radius: 10rpx;
                    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
                }

                .w-tit {
                    display: flex;
                    margin-left: 10rpx;
                    flex-direction: column;
                    width: 300rpx;
                    height: 78rpx;

                    .w-datit {
                        width: 202rpx;
                        height: 48rpx;
                        font-size: 28rpx;
                        font-family: PingFang SC, PingFang SC-500;
                        font-weight: 500;
                        text-align: LEFT;
                        color: #000000;
                        line-height: 32rpx;
                    }

                    .w-xitit {
                        width: 194rpx;
                        height: 48rpx;
                        font-size: 20rpx;
                        font-family: PingFang SC, PingFang SC-500;
                        font-weight: 500;
                        text-align: left;
                        color: #c0bfbf;
                        line-height: 24rpx;
                    }
                }
            }

            .w-box2,
            .w-box3 {
                display: flex;
                height: 40rpx;
                margin: 12rpx 28rpx;
                background: #ffffff;
                justify-content: center;
                align-items: center;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #000000;
                line-height: 24rpx;
            }

            .w-box3 {
                margin-top: 5rpx;
            }
        }
    }

    // 发现圈子
    .fx-box {
        margin-top: 40rpx;
        display: flex;
        height: 70rpx;
        width: 100%;
        flex-direction: row;

        .fa-box {
            display: flex;
            height: 70rpx;
            width: 150rpx;
            align-items: center;
            text-align: left;
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: left;
            color: #000000;
            line-height: 38rpx;
        }

        .xin-box {
            display: flex;
            margin-left: 250rpx;
            height: 70rpx;
            width: 220rpx;
            flex-direction: row;

            .xw-box {
                display: flex;
                margin-top: 18rpx;
                width: 36rpx;
                height: 36rpx;
                border-radius: 50%;
                border: 4rpx solid #f2bb16;
                color: #f2bb16;
                justify-content: center;
                align-items: center;
                font-size: 48rpx;
                font-weight: 50;
                // background: #e61a1a;
            }

            .xq-box {
                display: flex;
                margin-top: 18rpx;
                margin-left: 20rpx;
                height: 40rpx;
                width: 150rpx;
                font-size: 30rpx;
                justify-content: center;
                align-items: center;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: LEFT;
                color: #f2bb16;
                line-height: 36rpx;
            }
        }
    }

    // 热门圈子
    .clows {
        margin-top: 20rpx;
        display: flex;
        width: 100%;
        height: 280rpx;
        flex-direction: row;

        .clow1s {
            display: flex;
            flex-direction: column;
            margin-right: 56rpx;
            width: 402rpx;
            height: 258rpx;
            background: #f0f0f0;
            border-radius: 40rpx;

            .re-box1 {
                width: 402rpx;
                height: 72rpx;
                display: flex;
                flex-direction: row;
                background: #f2bb16;
                border-radius: 40rpx 40rpx 0rpx 0rpx;

                .re-box2 {
                    display: flex;
                    margin-top: 15rpx;
                    margin-left: 20rpx;
                    justify-content: center;
                    align-items: center;
                    width: 154rpx;
                    height: 48rpx;
                    font-size: 30rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #ffffff;
                    line-height: 36rpx;
                }

                .reg-box {
                    display: flex;
                    margin-top: 10rpx;
                    margin-left: 170rpx;
                }
            }

            .re-box3 {
                display: flex;
                margin-top: 20rpx;
                height: 78rpx;
                width: 100%;
                flex-direction: row;

                .re1 {
                    display: flex;
                    width: 54rpx;
                    height: 54rpx;
                    margin-left: 20rpx;
                    background: #ffffff;
                    border-radius: 10rpx;
                    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
                }

                .res {
                    margin-left: 30rpx;
                    height: 78rpx;
                    width: 300rpx;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    display: flex;

                    .re2 {
                        height: 40rpx;
                        width: 300rpx;
                    }

                    .re3 {
                        height: 40rpx;
                        width: 300rpx;
                        font-size: 20rpx;
                        font-family: PingFang SC, PingFang SC-500;
                        font-weight: 500;
                        text-align: left;
                        color: #c0bfbf;
                        line-height: 24rpx;
                    }
                }
            }

        }
    }

    // 进入圈子
    .bottnons-box {
        display: flexbox;
        flex-direction: column;
        margin-top: 48rpx;
        background: #f0f0f0;
        width: 630rpx;
        height: 260rpx;
        border-radius: 20rpx;

        .tops-box {
            display: flex;
            margin-top: 28rpx;
            height: 96rpx;
            width: 630rpx;
            flex-direction: row;

            .tu-z {
                margin-left: 56rpx;
                width: 76rpx;
                height: 78rpx;
                background: #ffffff;
                border-radius: 10rpx;
                box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }

            .mid-z {
                display: flex;
                margin-left: 20rpx;
                height: 96rpx;
                width: 210rpx;
                flex-direction: column;

                .mid1-z {
                    width: 202rpx;
                    height: 48rpx;
                    font-size: 28rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #000000;
                    line-height: 32rpx;
                }

                .mid2-z {
                    width: 194rpx;
                    height: 48rpx;
                    font-size: 20rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: left;
                    color: #c0bfbf;
                    line-height: 24rpx;
                }
            }

            .qu-z {
                margin-top: 40rpx;
                margin-left: 100rpx;
                width: 144rpx;
                height: 44rpx;
                background: #f2bb16;
                border-radius: 20rpx;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #ffffff;
                line-height: 44rpx;
            }
        }

        .tex {
            margin-top: 18rpx;
            height: 50rpx;

            .boton-box2 {
                display: flex;
                margin-left: 56rpx;
                width: 520rpx;
                height: 40rpx;
                background: #ffffff;
                border-radius: 10rpx;
                justify-content: center;
                align-items: center;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #000000;
                line-height: 24rpx;
            }
        }

    }
}
</style>